<script setup lang="ts">
import Dialog from '@/components/Dialog/index.vue'
import { getAccuracyMessage } from '@/utils/accuracyMessages'
import { formatPercentage } from '@/utils/format'
import { ref } from 'vue'

const props = defineProps<{
  correctRate: number
  buttons: {
    text: string
    type: 'primary' | 'default'
    onClick: () => void
  }[]
}>()

const dialogRef = ref()
const accuracyMessage = ref('')

// 打开弹框
function openDialog() {
  dialogRef.value.open()
  accuracyMessage.value = getAccuracyMessage(props.correctRate)
}

defineExpose({
  openDialog,
})
</script>

<template>
  <Dialog ref="dialogRef" title="提示" :buttons="buttons">
    <template #content-title>
      <view v-if="correctRate === 100">
        <view class="title">
          赞， 正确率<text class="word-rate ml-4">
            {{ correctRate }}%
          </text>
        </view>
      </view>
      <view v-else>
        检查正确率 <text class="word-rate " :class="{ error: correctRate < 85 }">
          {{ formatPercentage(correctRate / 100) }}%
        </text>
      </view>
    </template>
    <template #content-sub-title>
      <view class="sub-title">
        {{ accuracyMessage }}
      </view>
    </template>
  </Dialog>
</template>

<style lang="scss" scoped>
.dialog-content {
  .word-rate{
    color: $primary-highlight-color;
    &.error{
      color: red;
    }
  }
}
</style>
